<template>
    <el-container class="fm2-container">
        <el-main class="fm2-main">
            <el-container>
                <el-aside style="wdith: 250px;">
                    <div class="components-list">
                        <div class="widget-cate">基础字段</div>
                        <draggable
                            tag="ul"
                            :list="basicComponents"
                            v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                            @end="handleMoveEnd"
                            @start="handleMoveStart"
                            :move="handleMove"
                        >

                            <li class="form-edit-widget-label" v-for="(item, index) in basicComponents" :key="index">
                                <a>
                                    <i class="icon iconfont2" :class="item.icon"/>
                                    <span>{{ item.name }}</span>
                                </a>
                            </li>
                        </draggable>

                        <div class="widget-cate">高级字段</div>
                        <draggable
                            tag="ul"
                            :list="advanceComponents"
                            v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                            @end="handleMoveEnd"
                            @start="handleMoveStart"
                            :move="handleMove"
                        >

                            <li class="form-edit-widget-label" v-for="(item, index) in advanceComponents" :key="index">
                                <a>
                                    <i class="icon iconfont2" :class="item.icon"/>
                                    <span>{{ item.name }}</span>
                                </a>
                            </li>
                        </draggable>
                        <div class="widget-cate">布局字段</div>
                        <draggable
                            tag="ul"
                            :list="layoutComponents"
                            v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                            @end="handleMoveEnd"
                            @start="handleMoveStart"
                            :move="handleMove"
                        >

                            <li class="form-edit-widget-label data-grid" v-for="(item, index) in layoutComponents" :key="index">
                                <a>
                                    <i class="icon iconfont2" :class="item.icon"/>
                                    <span>{{ item.name }}</span>
                                </a>
                            </li>
                        </draggable>
                    </div>
                </el-aside>
                <el-container class="center-container" direction="vertical">
                    <el-header class="btn-bar" style="height: 45px;">
                        <slot name="action"/>
                        <el-button v-if="upload" type="text" size="medium" icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
                        <el-button v-if="preview" type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
                        <el-button v-if="generateJson" type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
                        <el-button v-if="generateCode" type="text" size="medium" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
                    </el-header>
                    <el-main class="widget" :class="{'widget-empty': widgetForm.list.length == 0}">
                        <div class="tab_box">
                            <ul>
                                <li @click="goRouter('phone')">
                                    <i class="el-icon-mobile-phone"/> 手机
                                </li>
                                <li class="on">
                                    <i class="el-icon-menu"/> 电脑
                                </li>
                                <li @click="goRouter('moban')">
                                    制作模板
                                </li>
                            </ul>
                        </div>
                        <widget-form ref="widgetForm" @activeRect="activeRectFun" :active-rect="activeIndex" :data="widgetForm" :select.sync="widgetFormSelect" />
                    </el-main>
                </el-container>

                <el-aside class="widget-config-container">
                    <el-container>
                        <el-header height="45px">
                            <div class="config-tab" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">字段属性</div>
                            <div class="config-tab" :class="{active: configTab=='style'}" @click="handleConfigSelect('style')">区域样式</div>
                            <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性</div>
                        </el-header>
                        <el-main class="config-content">
                            <widget-config v-show="configTab=='widget'" :select-dict="selectColumndatas" :data="widgetFormSelect"/>
                            <style-config v-show="configTab=='style'" :select-dict="selectColumndatas" :data="widgetFormSelect"/>
                            <form-config v-show="configTab=='form'" :data="widgetForm.config"/>
                        </el-main>
                    </el-container>
                </el-aside>
                <el-dialog
                    title="预览"
                    :visible.sync="previewVisible"
                    width="1200px"
                    class="yulan_box"
                >

                    <generate-form insite="true" :data="widgetForm" :select.sync="widgetFormSelect" ref="generateForm"/>
                </el-dialog>

                <cus-dialog
                    :visible="uploadVisible"
                    @on-close="uploadVisible = false"
                    @on-submit="handleUploadJson"
                    ref="uploadJson"
                    width="800px"
                    form
                >
                    <el-alert type="info" title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"/>
                    <div id="uploadeditor" style="height: 400px;width: 100%;">{{ jsonEg }}</div>
                </cus-dialog>

                <cus-dialog
                    :visible="jsonVisible"
                    @on-close="jsonVisible = false"
                    ref="jsonPreview"
                    width="800px"
                    form
                >

                    <div id="jsoneditor" style="height: 400px;width: 100%;">{{ jsonTemplate }}</div>

                    <template slot="action">
                        <el-button id="copybtn" data-clipboard-target=".ace_text-input">双击复制</el-button>
                    </template>
                </cus-dialog>

                <cus-dialog
                    :visible="codeVisible"
                    @on-close="codeVisible = false"
                    ref="codePreview"
                    width="800px"
                    form
                    :action="false"
                >
                    <div id="codeeditor" style="height: 500px; width: 100%;">{{ htmlTemplate }}</div>
                </cus-dialog>
            </el-container>
        </el-main>
        <!-- <el-footer height="30px">Powered by <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GavinZhuLei</a></el-footer> -->
    </el-container>
</template>

<script>
import Draggable from 'vuedraggable'
import WidgetConfig from './WidgetConfig'
import FormConfig from '../FormConfig'
import StyleConfig from './setConfig/StyleConfig'
import WidgetForm from './WidgetForm'
import CusDialog from '../CusDialog'
import GenerateForm from '../GenerateForm'
import Clipboard from 'clipboard'
import { basicComponents, layoutComponents, advanceComponents } from './componentsConfig.js'
import { loadJs, loadCss } from '@/common/utils/index.js'
import request from '@/common/utils/request.js'
import generateCode from '../generateCode.js'
import { searchCardForm, getselectColumndatasByFormId } from '@/api/api'
const ace = window.ace
export default {
    name: 'fm-making-form',
    components: {
        Draggable,
        WidgetConfig,
        FormConfig,
        StyleConfig,
        WidgetForm,
        CusDialog,
        GenerateForm
    },
    props: {
        preview: {
            type: Boolean,
            default: false
        },
        generateCode: {
            type: Boolean,
            default: false
        },
        generateJson: {
            type: Boolean,
            default: false
        },
        upload: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            activeIndex: 0,
            basicComponents,
            layoutComponents,
            advanceComponents,
            resetJson: false,
            id: '',
            widgetForm: {
                list: [],
                config: {
                    formId: '',
                    Id: '',
                    labelWidth: 100,
                    labelPosition: 'top',
                    size: 'small',
                    column: 1,
                    xl: 6,
                    lg: 6,
                    md: 8,
                    sm: 12,
                    height: '',
                    isMoban: false,
                    radio: 'pc'
                }
            },
            configTab: 'widget',
            widgetFormSelect: null,
            previewVisible: false,
            jsonVisible: false,
            codeVisible: false,
            uploadVisible: false,
            remoteFuncs: {
                func_test(resolve) {
                    setTimeout(() => {
                        const options = [
                            { id: '1', name: '1111' },
                            { id: '2', name: '2222' },
                            { id: '3', name: '3333' }
                        ]

                        resolve(options)
                    }, 2000)
                }
            },
            widgetModels: {
            },
            blank: '',
            htmlTemplate: '',
            jsonTemplate: '',
            uploadEditor: null,
            selectColumndatas: [],
            menuResult: [],
            jsonEg: `{
                "list": [
                    {
                    "type": "input",
                    "name": "单行文本",
                    "icon": "icon-input",
                    "options": {
                        "width": "100%",
                        "defaultValue": "",
                        "required": false,
                        "dataType": "string",
                        "pattern": "",
                        "placeholder": "",
                        "remoteFunc": "func_1540908864000_94322"
                    },
                    "key": "1540908864000_94322",
                    "model": "input_1540908864000_94322",
                    "rules": [
                        {
                        "type": "string",
                        "message": "单行文本格式不正确"
                        }
                    ]
                    },
                    {
                    "type": "textarea",
                    "name": "多行文本",
                    "icon": "icon-diy-com-textarea",
                    "options": {
                        "width": "100%",
                        "defaultValue": "",
                        "required": false,
                        "pattern": "",
                        "placeholder": "",
                        "remoteFunc": "func_1540908876000_19435"
                    },
                    "key": "1540908876000_19435",
                    "model": "textarea_1540908876000_19435",
                    "rules": []
                    }
                ],
                "config": {
                    "labelWidth": 100,
                    "labelPosition": "top",
                    "size": "small"
                }
                }`
        }
    },
    watch: {
        widgetForm: {
            deep: true,
            handler: function(val) {

            }
        }
    },
    mounted() {
        if (this.$route.query.formId) {
            this.widgetForm.config.formId = this.$route.query.formId
            if (this.$route.query.update === 'true') {
                this._searchCardForm(this.$route.query.formId)
            }
            this._getselectColumndatasByFormId(this.$route.query.formId)
        }
    },
    methods: {
        goRouter(route) {
            const query = this.$route.query
            if (query.formId) {
                if (route == 'phone') {
                    this.$router.push({ path: '/formMaking/phone', query: { formId: query.formId, update: true }})
                } else if (route == 'pc') {
                    this.$router.push({ path: '/formMaking/pc', query: { formId: query.formId, update: true }})
                } else if (route == 'moban') {
                    this.$router.push({ path: '/formMaking/setmoban', query: { formId: query.formId, update: true }})
                }
            } else {
                if (route == 'phone') {
                    this.$router.push({ path: '/formMaking/phone' })
                } else if (route == 'pc') {
                    this.$router.push({ path: '/formMaking/pc' })
                } else if (route == 'moban') {
                    this.$router.push({ path: '/formMaking/setmoban' })
                }
            }
        },
        activeRectFun(index) {
            this.activeIndex = index
        },
        tucengActive(index) {
            this.activeIndex = index
        },
        _getselectColumndatasByFormId(formId) {
            getselectColumndatasByFormId(formId)
                .then(res => {
                    this.selectColumndatas = res.RESULT
                    if (res.menuRESULT) {
                        this.menuResult = res.menuRESULT
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        _searchCardForm(formId) {
            searchCardForm(formId)
                .then(res => {
                    if (res.rcode === '0000') {
                        const json = JSON.parse(res.data.JSONSTR)
                        json.config.formId = this.$route.query.formId
                        this.id = res.data.ID
                        this.$nextTick(() => {
                            // const editor = ace.edit('jsoneditor')
                            // editor.session.setMode('ace/mode/json')
                            // editor.setValue(json)
                            // this.uploadEditor = editor
                            this.setJSON(json)
                        })
                    }
                })
        },
        handleConfigSelect(value) {
            this.configTab = value
        },
        handleMoveEnd(evt) {
            // console.log('end', evt)
        },
        handleMoveStart({ oldIndex }) {
            // console.log('start', oldIndex, this.basicComponents)
        },
        handleMove() {
            return true
        },
        handlePreview() {
            this.previewVisible = true
        },
        handleTest() {
            this.$refs.generateForm.getData().then(data => {
                this.$alert(data, '').catch(e => {})
                this.$refs.widgetPreview.end()
            }).catch(e => {
                this.$refs.widgetPreview.end()
            })
        },
        handleGenerateJson() {
            this.jsonVisible = true
            this.jsonTemplate = this.widgetForm
            this.$nextTick(() => {
                const editor = ace.edit('jsoneditor')
                editor.session.setMode('ace/mode/json')

                const btnCopy = new Clipboard('#copybtn')
            })
        },
        handleGenerateCode() {
            this.codeVisible = true
            this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm))
            this.$nextTick(() => {
                const editor = ace.edit('codeeditor')
                editor.session.setMode('ace/mode/html')
            })
        },
        handleUpload() {
            this.uploadVisible = true
            this.$nextTick(() => {
                this.uploadEditor = ace.edit('uploadeditor')
                this.uploadEditor.session.setMode('ace/mode/json')
            })
        },
        handleUploadJson() {
            try {
                this.setJSON(JSON.parse(this.uploadEditor.getValue()))
                this.uploadVisible = false
            } catch (e) {
                this.$message.error(e.message)
                this.$refs.uploadJson.end()
            }
        },
        getJSON() {
            return {
                id: this.id,
                widgetForm: this.widgetForm
            }
            // return this.widgetForm;
        },
        getHtml() {
            return generateCode(JSON.stringify(this.widgetForm))
        },
        setJSON(json) {
            this.widgetForm = json

            if (json.list.length > 0) {
                this.widgetFormSelect = json.list[0]
            }
        },
        handleInput(val) {
            console.log(val)
            this.blank = val
        }
    }
}
</script>

<style lang="scss">
@import '../../../common/iconfont/iconfont.css';
@import '../../../common/styles/cover.scss';
@import '../../../common/styles/form-making.scss';
.config-tab{
    width: 90px !important;
}
.yulan_box{
    .el-dialog{
        width: 100%;
        height: 700px;
        overflow: auto;
    }
}
.widget{
    background:#f9f9f9;
}
.widget-empty{
  background: #f9f9f9 url('../../../assets/form_empty.png') no-repeat;
  background-position: 50%;
}
.widget-form-container{
    top: 50px;
}
.tab_box{
    background: #fff;
    padding-top: 10px;
    ul{
        text-align: center;
        li{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            padding: 0 15px;
            cursor: pointer;
            position: relative;
            top: 2px;
        }
        li.on{
            background-color: #f9f9f9;
            border-bottom-width: 0;
            border-left: 1px solid #f2f2f2;
            border-top: 1px solid #f2f2f2;
            border-right: 1px solid #f2f2f2;
            border-radius: 5px 5px 0 0;
        }
    }
}
</style>
